<template>
	<view>
		<!-- <view class="top">
			本场考试共<text>{{dataList.length}}</text>道题，总分<text>{{agreeScore.totalScore}}</text>,
			及格分数为<text>{{agreeScore.passScore}}</text>
		</view> -->
		<view class="title-view" style="padding-bottom: 15rpx;">
			<!-- 居中标题 -->
			<view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-align-items-center">
				<text class="gui-color-gray gui-icons small-text">&#xe69b;</text>
				<text class="gui-primary-color gui-h6 title1-margin gui-title-text">{{dataObj.title}}</text>
				<text class="gui-color-gray gui-icons small-text">&#xe69b;</text>
			</view>
		</view>
		<swiper :current="currentIndex" @change="swiperChange" :style="{height:mainHeight+'px', width:'750rpx'}">
			<!-- 轮播项目数量对应 上面的选项标签 -->
			<swiper-item v-for="(item, index) in dataList" :key="index">
				<!-- 使用滚动区域来实现主体内容区域 -->
				<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true">
					<view class="item-scroll">
						<view class="title flex">
							<text>{{item.index}} 、{{item.problem}}？</text>
							<view class="status cfff"
								:style="{'background':getType(item.topicType,'color')}">
								{{getType(item.topicType,'text')}}</view>
						</view>
						<view class="select" v-if="item.topicType=='Single'||'Judge'">
							<radio-group class="options" @change="radioChange($event,item.parentIndex,item.index)">
								<view v-for="(item2,index2) in item.options">
									<label class="radio">
										<radio :value="item2.option" style="transform:scale(0.8)" />
										<text>{{item2.option}}.{{item2.content}}</text>
									</label>
								</view>
							</radio-group>
						</view>
						<view class="select" v-else>
							<checkbox-group class="options" @change="checkChange($event,item.parentIndex,item.index)">
								<view v-for="(item2,index2) in item.options">
									<label>
										<checkbox :value="item2.option" style="transform:scale(0.8)" />
										<text>{{item2.option}}.{{item2.content}}</text>
									</label>
								</view>
							</checkbox-group>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="tools">
			<view class="progress">
				<text>已完成 {{askNum}}/{{dataList.length}}</text>
				<gui-progress :percent="progress" activeColor="#ffa60e"></gui-progress>
			</view>
			<view class="tool">
				<view class="btn" @tap="backPage">上一题</view>
				<view class="btn" @tap="nextPage">下一题</view>
				<view class="btn" @tap="allPage">答题卡</view>
				<view class="btn" @tap="handleSubmit">交卷</view>
			</view>
		</view>
		<!-- 底部弹出 答题卡 -->
		<gui-popup ref="guipopup3" position="bottom">
			<view class="gui-relative gui-box-shadow">
				<view class="box">
					<scroll-view scroll-y="true" class="box-scroll">
						<view class="box-list">
							<view class="box-item" v-for="(item,index) in questions" :key="index">
								<view>{{numType[index]}}、{{item.title}}</view>
								<view class="box-options flex-ac-wrap">
									
									<view class="item flex-ac-jc" :class="{'isCheck':item2.isAsk}"
									 v-for="(item2,index2) in item.questions" :key="item.id" @tap="goPage(item2.index)">
										{{item2.index}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- iphone 底部操作按钮躲避 -->
				<gui-iphone-bottom></gui-iphone-bottom>
			</view>
		</gui-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				did: '', //培训id
				dataObj: {},
				questions: [],
				dataList: [], //问题
				numType:['一','二','三'],
				currentIndex: 0, // 选中选项的 索引
				mainHeight: 400, // 核心区域高度 
				askNum: 0, //已回答数量
				isHave: true, //是否有习题
				examOne:{ //要提交的题目信息
					questionId:'', //题目id
					answer:'' //回答
				}
			}
		},
		computed:{
			progress(){
				return parseInt((this.askNum / this.dataList.length) * 100)
			}
		},
		onLoad(options) {
			console.log('options', options);
			this.did = options.id || ''
			this.userId = options.userId || ''
			this.optionDisabled = options.op == 'look' ? true : false
			if (this.did) {
				this.loadDetail()
			}
		},
		methods: {
			submitProcess(){
				if(!this.examOne.questionId) return;
				if(!this.examOne.answer) return;
				this.$http.post('/training/paper/commitPaperProcess',{
					planId:this.dataObj.planId, //培训计划id
					paperId:this.dataObj.id ,//试卷id
					...this.examOne
				}).then(res => {
					let result = res.msg
					console.log('',result)
					this.examOne = {
						questionId:'', //题目id
						answer:'' //回答
					}
				})
			},
			handleSubmit() {
				if (!this.isHave) return this.$u.msg('该考试未上传题目！')
				let content = this.dataList.filter(item => item.isAsk == true).length != this.dataList.length ?
					'尚有题目未完成。确认现在就交卷吗？' : '确认交卷吗？'
				this.submitProcess()	
				this.$u.showModal('',content,(res)=>{
					if(res){
						uni.showLoading({
							mask: true,
							title: '正在提交...'
						})
						this.$http.post('/training/paper/commitExam',{
							planId:this.dataObj.planId, //培训计划id
							paperId:this.dataObj.id //试卷id
						}).then(res => {
							let result = res.data
							console.log('',result)
							uni.$emit('reFlashList')
							this.$u.msg('交卷成功!')
							this.$u.back(1, 1000)
						})
					}
				})
			},
			loadDetail() {
				this.$http.get(`/training/paper/planPaper`, {
					planId: this.did
				}).then(res => {
					if (res.code == 200) {
						let result = res.data
						this.dataObj = result
						let num = 1
						result.questions_map.forEach((item,index)=>{
							let obj = {
								title:item.title,
								parentIndex:index,
								questions:[]
							}
							item.questions.forEach((item2,index2)=>{
								item2.index=num
								item2.parentIndex=index
								this.dataList.push(item2)
								obj.questions.push(item2)
								num++;
							})
							this.questions.push(obj)
						})
						this.isHave = this.dataList.length ? true : false
						console.log('result', result);
						console.log('this.questions', this.questions);
						console.log('this.dataList', this.dataList);
					}
				})
			},
			radioChange(e,parentIndex,idx) {
				let index = this.questions[parentIndex].questions.findIndex(item=>item.index==idx)
				let obj = this.questions[parentIndex]
				if (e.detail.value) {
					this.dataList[this.currentIndex].isAsk = true
					this.dataList[this.currentIndex].answer = e.detail.value
					obj.questions[index].isAsk = true
					obj.questions[index].answer = e.detail.value
				} else {
					this.dataList[this.currentIndex].isAsk = false
					this.dataList[this.currentIndex].answer = ''
					obj.questions[index].isAsk = false
					obj.questions[index].answer = ''
				}
				console.log(this.questions[parentIndex].questions[index]);
				this.askNum = this.dataList.filter(item => item.isAsk == true).length
				if(this.dataList[this.currentIndex].isAsk == true){
					console.log('答案',this.dataList[this.currentIndex]);
					let exObj = this.dataList[this.currentIndex]
					this.examOne = {
						questionId:exObj.id, //题目id
						answer:exObj.answer //回答
					}
				}
				// this.$forceUpdate();
			},
			checkChange(e,parentIndex,idx) {
				let index = this.questions[parentIndex].questions.findIndex(item=>item.index==idx)
				if (e.detail.value.length) {
					this.dataList[this.currentIndex].isAsk = true
					this.dataList[this.currentIndex].answer = e.detail.value.join('')
					this.questions[parentIndex].questions[index].isAsk = true
					this.questions[parentIndex].questions[index].answer = e.detail.value.join('')
				} else {
					this.dataList[this.currentIndex].isAsk = false
					this.dataList[this.currentIndex].answer = ''
					this.questions[parentIndex].questions[index].isAsk = false
					this.questions[parentIndex].questions[index].answer = ''
				}
				this.askNum = this.dataList.filter(item => item.isAsk == true).length
				if(this.dataList[this.currentIndex].isAsk == true){
					console.log('答案dd',this.dataList[this.currentIndex]);
					let exObj = this.dataList[this.currentIndex]
					this.examOne = {
						questionId:exObj.id, //题目id
						answer:exObj.answer //回答
					}
				}
				// this.$forceUpdate();
			},
			backPage() {
				this.currentIndex = this.currentIndex != 0 ? this.currentIndex - 1 : this.currentIndex
				this.submitProcess()
			},
			nextPage() {
				this.currentIndex = this.currentIndex != this.dataList.length - 1 ? this.currentIndex + 1 : this.dataList
					.length - 1
				this.submitProcess()	
			},
			allPage() {
				this.$refs.guipopup3.open();
			},
			goPage(idx) {
				this.$refs.guipopup3.close();
				this.currentIndex = idx-1
			},
			swiperChange: function(e) {
				this.currentIndex = e.detail.current;
			},
			getType(status, type) {
				//退款的流程 1.申请退款 2.已同意退款 3.退货中 4.已退货 5.已完成 6.拒绝
				let textStatus = ''
				let color = ''
				switch (status) {
					case 'Single': 
						textStatus = '单选'
						color = '#32CD32'
						break;
					case 'Multi':
						textStatus = '多选'
						color = '#2979ff'
						break;
					case 'Judge':
						textStatus = '判断'
						color = '#FF0000'
						break;
					default:
						break;
				}
				return type == 'text' ? textStatus : color
			},
		}
	}
</script>
<style lang="less">
	page {
		background: #FFFFFF;
	}

	.top {
		padding: 80rpx 0 0 0;
		text-align: center;

		text {
			color: #2979ff;
			padding: 0 4rpx;
			font-size: 30rpx;
		}
	}

	.item-scroll {
		padding: 50rpx;

		.title {
			.status {
				padding: 4rpx 14rpx;
				border-radius: 20rpx 0 20rpx 0;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}

		.select {
			margin-top: 20rpx;

			.options {
				display: flex;
				flex-wrap: wrap;

				view {
					width: 50%;
					margin-top: 40rpx;
				}
			}
		}
	}

	.tools {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.progress {
			width: 500rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;
			text-align: center;
			color: #2979ff;

			text {
				line-height: 60rpx;
			}
		}

		.tool {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			background: #2979ff;
			color: #FFFFFF;

			.btn {
				color: #2979ff;
				margin-right: 20rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				height: 45rpx;
				width: 120rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.box {
		background: #FFFFFF;
		padding: 30rpx;

		.box-scroll {
			height: 650rpx;

			.box-list {
				.box-item {
					margin-bottom: 40rpx;
					.box-options{
						.item{
							width: 70rpx;
							height: 70rpx;
							border: 1px solid #eee;
							border-radius: 6rpx;
							margin-top: 25rpx;
							margin-right: 25rpx;
						}
						.isCheck{
							background: #567722;
							color: #FFFFFF;
						}
					}
				}
			}

		}
	}
</style>